<template>
  <kk-relative class="Page W">
    <kk-text class="T1" val="Pair 容器" />
    <div class="F2" />
    <kk-text class="T2" val="基于 table 的特性制作的上下或左右分离容器，其中一边适应子元素大小，另一边自动填充剩余空间" />
    <div class="F2" />
    <div class="Shows">
      <div class="Polk">
        <kk-pair class="CenterBox" top>
          <div class="CenterBoxIn CenterBoxH" slot="auto" />
        </kk-pair>
        <kk-pair class="CenterBox" right>
          <div class="CenterBoxIn CenterBoxW" slot="auto" />
        </kk-pair>
        <kk-pair class="CenterBox" bottom>
          <div class="CenterBoxIn CenterBoxH" slot="auto" />
        </kk-pair>
        <kk-pair class="CenterBox" left>
          <div class="CenterBoxIn CenterBoxW" slot="auto" />
        </kk-pair>
      </div>
      <div class="Codea">
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Blue Space" val="top" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Blue Space" val="right" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Blue Space" val="bottom" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Black" val="&gt;" />
        <div class="F2" />
        <kk-text class="Black" val="&lt;" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Blue Space" val="left" />
        <kk-text class="Black" val="&gt;&lt;/" />
        <kk-text class="Blues" val="kk-pair" />
        <kk-text class="Black" val="&gt;" />
      </div>
    </div>

    <div class="F1" />

    <kk-text class="T1" val="行内样式" />
    <div class="F2" />
    <kk-text class="T2" val="组件自带一部分行内样式，请注意样式冲突" />
    <div class="F2" />
    <div class="Shows">
      <div class="Codea">
        <kk-text class="Blues" val="box-sizing:" />
        <kk-text class="Orange Space" val="border-box" />
        <div class="F2" />
        <kk-text class="Blues" val="position:" />
        <kk-text class="Orange Space" val="relative" />
        <div class="F2" />
        <kk-text class="Blues" val="overflow:" />
        <kk-text class="Orange Space" val="hidden" />
      </div>
    </div>
  </kk-relative>
</template>

<style scoped>
.CenterBox {
  border: 0.05vw solid rgb(220, 223, 230);
  display: inline-block;
  margin-right: 0.7vw;
  height: 4vw;
  width: 4vw;
}

.CenterBoxIn {
  background-color: rgb(217, 236, 255);
}

.CenterBoxH {
  height: 1vw;
  width: 100%;
}

.CenterBoxW {
  height: 100%;
  width: 1vw;
}
</style>